import $ from 'jquery';
import HandleSearch from './utils/HandleSearch';
import React,{ Component } from 'react';
import { Flex, WhiteSpace, WingBlank } from 'antd-mobile';
const Item = Flex.Item;



class OrderInfo extends Component {
    state = {
        orderId: '',
        marking: '',
        fontFamily: '',
        font: '',
    }

    componentWillMount() {
        const params = HandleSearch.parseQueryString(window.location.href);
        const { openid } = params;
        $.ajax({
            url: `/getInfo?openid=${openid}`,
            type: 'GET',
            async: true,
            success: (response)=>{
                const { order_id, marking, font_family, font } = response;
                this.setState({
                    orderId: order_id,
                    marking,
                    fontFamily: font_family,
                    font,
                });
            },
            error: (err)=>{
                throw err;
            }
        });

    }

    render(){
        return (<div className="OrderInfo">
            <Flex
                direction="column"
            >
                <Item style={{color: "#f7931e", fontSize: '1rem', marginTop: '2rem'}}>您的U盘已定制</Item>
                <Item style={{fontSize: '0.8rem', marginTop: '1rem', marginBottom: '2rem'}}>请到柜台领取您的专属定制U盘</Item>
                <Flex
                    align="start"
                    direction="column"
                    style={{width: '100%'}}
                >
                    <Item style={{fontSize: '0.9rem', margin: '2rem 3rem'}}>
                        <span>订单编号</span>
                        <span style={{paddingLeft: '1rem'}}>{this.state.orderId}</span>
                    </Item>
                    <Item style={{fontSize: '0.9rem', margin: '2rem 3rem'}}>
                        <span>标签文字</span>
                        <span style={{paddingLeft: '1rem'}}>{this.state.marking}</span>
                    </Item>
                    <Item style={{fontSize: '0.9rem', margin: '2rem 3rem'}}>
                        <span>标签字体</span>
                        <span style={{paddingLeft: '1rem'}}>{this.state.font}</span>
                    </Item>
                </Flex>

            </Flex>
        </div>);
    }
}

export default OrderInfo;